<template>
    <div class="viewer-init">
        <h3>Viewer初始化</h3>
        <div class="viewer-info">
            <p><strong>说明：</strong>EarthUI已经为我们初始化了Viewer，无需重新创建</p>
            <p>可以通过以下代码获取到Cesium原生Viewer实例：</p>
            <pre class="code-block">
import { XbsjEarthUi } from '../../../../scripts/xbsjEarthUi';
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi;
const viewer = xbsjEarthUi.activeViewer?.innerViewer?.viewer;
            </pre>
        </div>
        <div class="viewer-controls">
            <button @click="getViewerInfo" class="info-btn">获取Viewer信息</button>
            <button @click="setCameraView" class="camera-btn">设置相机视角</button>
            <button @click="flyToLocation" class="fly-btn">飞行到滁州</button>
        </div>
        <div class="viewer-status">
            <p v-if="viewerInfo">Viewer版本: {{ viewerInfo }}</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue';
import { XbsjEarthUi } from '../../../../scripts/xbsjEarthUi';

const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi;
const viewerStatus = ref('未检查');
const viewerInfo = ref('');
const viewerStatusClass = ref('status-unknown');

// 获取EarthUI中的Cesium原生Viewer实例
const getCesiumViewer = () => {
    return xbsjEarthUi.activeViewer?.innerViewer?.viewer;
};

const getViewerInfo = () => {
    const viewer = getCesiumViewer();
    if (viewer) {
        viewerStatus.value = '已连接';
        viewerStatusClass.value = 'status-connected';
        viewerInfo.value = `Cesium ${(window as any).Cesium?.VERSION || '未知版本'}`;
        console.log('EarthUI Viewer信息:', viewer);
        console.log('Cesium版本:', (window as any).Cesium?.VERSION);
    } else {
        viewerStatus.value = '未找到';
        viewerStatusClass.value = 'status-error';
        viewerInfo.value = '';
        console.error('未找到EarthUI Viewer');
    }
};

const setCameraView = () => {
    const viewer = getCesiumViewer() as any;
    if (viewer && viewer.camera) {
        try {
            viewer.camera.setView({
                destination: (window as any).Cesium.Cartesian3.fromDegrees(118.30712, 32.30607, 3000),
                orientation: {
                    heading: 0,
                    pitch: (window as any).Cesium.Math.toRadians(-90),
                    roll: 0
                }
            });
            console.log('相机视角设置成功');
        } catch (error) {
            console.error('设置相机视角失败:', error);
        }
    } else {
        console.error('Viewer或相机不可用');
    }
};

const flyToLocation = () => {
    const viewer = getCesiumViewer() as any;
    if (viewer && viewer.camera) {
        try {
            viewer.camera.flyTo({
                destination: (window as any).Cesium.Cartesian3.fromDegrees(118.30712, 32.30607, 3000),
                duration: 3.0
            });
            console.log('飞行到滁州成功');
        } catch (error) {
            console.error('飞行失败:', error);
        }
    } else {
        console.error('Viewer或相机不可用');
    }
};

onMounted(() => {
    // 组件加载时自动检查Viewer状态
    getViewerInfo();
});
</script>

<style scoped>
.viewer-init {
    width: 280px;
    box-sizing: border-box;
    padding: 10px;
}

.viewer-info {
    box-sizing: border-box;
    font-size:14px;
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    margin-bottom: 15px;
}

.code-block {
    background-color: #2d3748;
    color: #e2e8f0;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    overflow-x: auto;
    margin: 10px 0;
}

.viewer-controls {
    display:flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.info-btn, .camera-btn, .fly-btn {
    margin-right: 10px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.info-btn {
    background-color: #2196F3;
    color: white;
}

.info-btn:hover {
    background-color: #1976D2;
}

.camera-btn {
    background-color: #4CAF50;
    color: white;
}

.camera-btn:hover {
    background-color: #45a049;
}

.fly-btn {
    background-color: #FF9800;
    color: white;
}

.fly-btn:hover {
    background-color: #F57C00;
}

.viewer-status {
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    border-left: 4px solid #dee2e6;
}

.status-unknown {
    color: #6c757d;
}

.status-connected {
    color: #28a745;
    font-weight: bold;
}

.status-error {
    color: #dc3545;
    font-weight: bold;
}
</style>
